<script setup>
import { onMounted, reactive, ref } from "vue"
const state = reactive({
    value: [],
    fetching: false,
    data: [],
})
function fetchData() {
    state.fetching = true
    setTimeout(() => {
        state.fetching = false
        state.data = Array(10)
            .fill("")
            .map((_, index) => ({
                value: index,
                label: index,
            }))
    }, 1000)
}
onMounted(() => {
    //设置页面,inp1 下的ant-select-selection-search 的input的placeholder
    const inp1 = document.querySelector(".inp1 .ant-select-selection-search input")
    inp1.placeholder = "搜 索"
})
</script>
<template>
    <div>
        <div class="search f_col">
            <a-select
                v-model:value="state.value"
                label-in-value
                placeholder="搜索"
                class="inp1"
                :showSearch="true"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="state.fetching ? undefined : null"
                :options="state.data"
                @search="fetchData"
            >
                <template v-if="state.fetching" #notFoundContent>
                    <a-spin size="small" />
                </template>
            </a-select>
            <div class="f_col tuijian">
                <h2 class="title">推荐功能</h2>
                <div class="empty">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
:where(.img1) {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}
:where(.search) {
    padding: 0px 100px;
    padding-top: 40px;
    height: 100%;

    justify-content: flex-start !important;
}
:where(.inp1) {
    background-color: var(--Neutral-12) !important;
    border: 1px solid var(--Neutral-10) !important;
    border-radius: 12px !important;
    height: 32px;
    caret-color: var(--character-60) !important;
    font-size: 16px;
    color: var(--character-85) !important;
    width: 100%;
    padding: 0 !important;
    transition: all 0.3s ease;
}
:where(.inp1:hover) {
    border-color: var(--Neutral-9) !important;
    background-color: var(--Neutral-11) !important;
}

:where(.inp1:focus-within) {
    border-color: var(--Neutral-8) !important;
    background-color: var(--Neutral-11) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

:where(.tuijian) {
    margin-top: 8vh;
    width: 100%;
    border-radius: 12px;
    background-color: var(--Neutral-11);
    padding: 24px;
    border: 1px solid var(--Neutral-11);
}

:where(.title) {
    text-align: left;
    width: 100%;
    color: var(--character-75);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}

:where(.empty) {
    padding: 32px;
    text-align: center;
    color: var(--character-45);
    margin-top: 16vh;
    font-size: 15px;
    background-color: var(--Neutral-11);
    border-radius: 8px;
}
</style>
<style>
.inp1 {
    color: var(--character-85) !important;
    border-radius: 8px !important;
    border: 1px solid var(--element-bg-color) !important;
}
.inp1 .ant-select-selector {
    /* background-color: transparent !important; */
    border: none !important;
    padding: 0 !important;
    color: var(--character-85) !important;
}
.inp1 .ant-select-selection-search {
    inset-inline-start: 0px !important;
    inset-inline-end: 0px !important;
    color: var(--character-85) !important;
    background-color: var(--element-bg-color) !important;
}
.inp1 input {
    height: 32px !important;
    padding: 0 12px !important;
    color: var(--character-85) !important;
}
:where(.inp1) input::placeholder {
    color: var(--Neutral-7) !important;
    text-align: center !important;
    font-size: 16px !important;
}
</style>
